<template>
	<view class="page-header">
		<view class="header-content">
			<view class="header-titles">
				<view class="header-title">{{ title }}</view>
				<view class="header-subtitle" v-if="subtitle">{{ subtitle }}</view>
			</view>
			
			<view class="header-actions" v-if="$slots.actions">
				<slot name="actions"></slot>
			</view>
		</view>
		
		<view class="header-tabs" v-if="tabs && tabs.length">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index" 
				class="header-tab" 
				:class="{ active: activeTab === tab.key }"
				@click="handleTabClick(tab.key)"
			>
				{{ tab.label }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'PageHeader',
		props: {
			title: {
				type: String,
				required: true
			},
			subtitle: {
				type: String,
				default: ''
			},
			tabs: {
				type: Array,
				default: () => []
			},
			activeTab: {
				type: String,
				default: ''
			}
		},
		methods: {
			handleTabClick(tabKey) {
				this.$emit('tab-change', tabKey);
			}
		}
	}
</script>

<style>
	.page-header {
		background-color: #fff;
		margin-bottom: 24px;
		padding: 20px 24px;
		border-radius: 8px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	}
	
	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.header-titles {
		flex: 1;
	}
	
	.header-title {
		font-size: 24px;
		font-weight: 600;
		color: #333;
		margin-bottom: 4px;
	}
	
	.header-subtitle {
		font-size: 14px;
		color: #666;
	}
	
	.header-actions {
		display: flex;
		gap: 12px;
	}
	
	.header-tabs {
		display: flex;
		margin-top: 16px;
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 0;
	}
	
	.header-tab {
		padding: 12px 16px;
		font-size: 14px;
		color: #666;
		cursor: pointer;
		position: relative;
		transition: all 0.3s;
	}
	
	.header-tab.active {
		color: #3f51b5;
		font-weight: 500;
	}
	
	.header-tab.active:after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: 16px;
		right: 16px;
		height: 2px;
		background-color: #3f51b5;
	}
	
	.header-tab:hover {
		color: #3f51b5;
	}
</style> 